<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  audioState,
  connect as connectAudio,
  attachMainAudio,
  attachEventAudio,
  unlockAudio,
} from "@/composables/useAudioWS";
import { useEventAutoTTS } from "@/bridge/useEventAutoTTS";
// 常驻 audio 元素
const mainEl  = ref<HTMLAudioElement|null>(null);
const eventEl = ref<HTMLAudioElement|null>(null);
useEventAutoTTS();        // 自动 TTS 事件
const showUnlock = ref(true);
function onUnlock() { unlockAudio(); showUnlock.value = false; }

onMounted(() => {
  if (mainEl.value)  attachMainAudio(mainEl.value);
  if (eventEl.value) attachEventAudio(eventEl.value);
  connectAudio();         // 全局只连接一次
});
</script>

<template>
  <!-- 主话术：可隐藏；若想做全局播放器就把 style 去掉再加 controls -->
  <audio ref="mainEl" autoplay preload="auto" playsinline webkit-playsinline style="display:none" />
  <!-- 事件声道：隐藏 -->
  <audio ref="eventEl" preload="auto" playsinline webkit-playsinline style="display:none" />

  <!-- 首次手势解锁 -->
  <button v-if="showUnlock" @click="onUnlock" class="global-audio-unlock">🔊 开启声音</button>
</template>

<style scoped>
.global-audio-unlock{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  padding:10px 14px; border-radius:10px; border:1px solid #ddd;
  background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.15); cursor:pointer;
}
.global-audio-unlock:hover{ background:#f7f7f7; }
</style>
